<template>
  <div>
    <a-modal title="SPU生成规则" :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <div>
        <a-alert type="warning">SKU长度建议不要超过15个字符,SKU设置可用中横杠-、下划线_，尽量不要用特殊字符</a-alert>
        <div style="margin: 10px 0">
          <a-radio-group v-model="form.enable">
            <a-radio :value="true">开启SKU自动生成</a-radio>
            <a-radio :value="false">关闭SKU自动生成</a-radio>
          </a-radio-group>
        </div>
        <div v-for="(item, index) of listArr" v-if="visible" style="display: flex; margin-top: 10px">
          <div>
            <a-select v-model="form.result[index].code" placeholder="请选择" style="width: 140px">
              <a-option v-for="item1 of item.options" :label="item1.label" :value="item1.value"></a-option>
            </a-select>
          </div>
          <div>
            <a-input-number style="width: 200px" v-if="form.result[index].code == 'RANDOM_NUMBER'" placeholder="请输入随机生成的位数" v-model="form.result[index].value" hide-button />
            <a-input style="width: 200px" v-if="form.result[index].code == 'CUSTOM_STR'" placeholder="请输入" v-model="form.result[index].value" />
            <a-input-number style="width: 200px" v-if="form.result[index].code == 'AUTO_INSRC'" placeholder="请输入自动增长初始值" v-model="form.result[index].value" hide-button />
            <a-select style="width: 200px" v-model="form.result[index].value" placeholder="请选择" v-if="form.result[index].code == 'DEPT_CODE'">
              <a-option label="一级部门编码" value="1"></a-option>
              <a-option label="二级部门编码" value="2"></a-option>
              <a-option label="三级部门编码" value="3"></a-option>
              <a-option label="一级+二级部门编码" value="12"></a-option>
              <a-option label="一级+三级部门编码" value="13"></a-option>
              <a-option label="二级+三级部门编码" value="23"></a-option>
            </a-select>
            <a-select style="width: 200px" v-if="form.result[index].code == 'CATE_CODE'" v-model="form.result[index].value" placeholder="请选择">
              <a-option label="一级分类编码" value="1"></a-option>
              <a-option label="二级分类编码" value="2"></a-option>
              <a-option label="三级分类编码" value="3"></a-option>
              <a-option label="一级+二级分类编码" value="12"></a-option>
              <a-option label="一级+三级分类编码" value="13"></a-option>
              <a-option label="二级+三级分类编码" value="23"></a-option>
            </a-select>
          </div>
          <a-button class="gray-outline" style="margin: 0 10px" @click="add(index)">
            <icon-plus />
          </a-button>
          <a-button class="gray-outline" @click="del(index)" v-if="listArr.length > 1">
            <icon-minus />
          </a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { updateLocationRemarkBatch } from '@/api/warehouse'
  import { getCategoryList, getByCompanyId, saveOrUpdateBatchById } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['detail', 'ids', 'remarkText'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data: any = reactive({
        form: {
          enable: true,
          result: [],
        },
        listArr: [],
        categoryOptions: [],
      })

      const open = () => {
        getCategory()
        getRule()
      }
      const handleOk = async () => {
        let params = _.cloneDeep(data.form)
        params.configList = data.form.result
        delete data.form.result
        const res: any = await saveOrUpdateBatchById(params)
        if (res.code == 'SUCCESS') {
          visible.value = false
          Message.success('设置成功')

          data.listArr = []
          data.form.result = []
          emit('save')
        }
      }
      const handleCancel = () => {
        visible.value = false
        data.listArr = []
        data.form.result = []
      }

      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.categoryOptions = res.data
      }

      const add = (i: number) => {
        let obj = {
          options: [
            { label: '随机生成', value: 'RANDOM_NUMBER' },
            { label: '自定义', value: 'CUSTOM_STR' },
            { label: '自增数', value: 'AUTO_INSRC' },
            { label: '部门编码', value: 'DEPT_CODE' },
            { label: '分类编码', value: 'CATE_CODE' },
          ],
        }
        data.listArr.splice(i + 1, 0, obj)
        data.form.result.splice(i + 1, 0, { code: 'RANDOM_NUMBER', value: '' })
      }

      const del = (i: string) => {
        data.listArr.splice(i, 1)
        data.form.result.splice(i, 1)
      }

      const getRule = async () => {
        const res = await getByCompanyId()
        if (res.data) data.form = res.data
        data.listArr = []
        data.form = {
          enable: true,
          result: [],
        }

        let obj = {
          options: [
            { label: '随机生成', value: 'RANDOM_NUMBER' },
            { label: '自定义', value: 'CUSTOM_STR' },
            { label: '自增数', value: 'AUTO_INSRC' },
            { label: '部门编码', value: 'DEPT_CODE' },
            { label: '分类编码', value: 'CATE_CODE' },
          ],
        }
        if (res.data && res.data.configList && res.data.configList.length > 0) {
          data.form.result = res.data?.configList.map((e) => {
            if (e.code == 'RANDOM_NUMBER' || e.code == 'AUTO_INSRC') {
              e.value = Number(e.value)
            }
            return e
          })
          res.data?.configList.forEach((e) => {
            data.listArr.push(obj)
          })
        } else {
          data.listArr.push(obj)
          data.form.result.push({ code: 'RANDOM_NUMBER', value: '' })
        }

        console.log(data.form.result, data.listArr)
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        add,
        del,
      }
    },
  })
</script>

<style lang="less" scoped></style>
